import React, { ChangeEventHandler, Dispatch, SetStateAction, useEffect, useState } from 'react';
import classNames from 'classnames';

export type InputValueType = string | ReadonlyArray<string> | number

interface InputProps {
    // 是否是密码框
    showPassword?: boolean
    setValue?: Dispatch<SetStateAction<InputValueType>>
    // 是否可清空
    clearable?: boolean
    // 值改变的回调
    onChange?: (value: InputValueType) => void
    className?: string
    style?: React.CSSProperties
    appendJSX?: React.ReactNode
    prependJSX?: React.ReactNode
    prefixIcon?: string
    prefixJSX?: React.ReactNode
    suffixIcon?: string
    suffixJSX?: React.ReactNode
}

type InputProsType = InputProps & React.InputHTMLAttributes<HTMLElement> & React.TextareaHTMLAttributes<HTMLElement>


const Input: React.FC<InputProsType> = props => {

    const { showPassword, placeholder, disabled, type, value, className, setValue, style, onChange, clearable, appendJSX, prependJSX, prefixJSX, prefixIcon, suffixIcon, suffixJSX, readOnly, rows } = props;

    // 关闭icon是否显示
    const [isShowPassword, setIsShowPassword] = useState<boolean>(false);

    const [isShowClearIcon, setIsShowClearIcon] = useState<boolean>(false);

    const classes = classNames(className, "yulang-input-container")

    const classesInput = classNames({
        "yulang-input": true,
        "yulang-input-disabled": disabled,
    })


    const handleInputChange: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> = (e) => {
        setValue && setValue(e.target.value);
        onChange && onChange(e.target.value);
    }

    const clearInputValue = () => {
        setValue && setValue('');
        onChange && onChange('');
    }

    const passwordEyeClick = () => {
        setIsShowPassword(!isShowPassword);
    }

    const renderAppend = () => {
        return appendJSX ? <div className={"yulang-input-append"}>
            {appendJSX}
        </div> : <></>
    }

    const renderPrepend = () => {
        return prependJSX ? <div className={"yulang-input-prepend"}>{prependJSX}
        </div> : <></>
    }

    const renderPrefix = () => {
        return prefixJSX ? prefixJSX : <i className={`iconfont ${prefixIcon}`}></i>
    }

    const renderSuffix = () => {
        return suffixJSX ? suffixJSX : <i className={`iconfont ${suffixIcon}`}></i>
    }

    useEffect(() => {
        if (value && String(value).length > 0 && !disabled && clearable) {
            setIsShowClearIcon(true);
        } else {
            setIsShowClearIcon(false);
        }
    }, [value, disabled, clearable])

    return <div className={classes} style={style}>
        {renderPrepend()}
        <div className={"prefix-input-suffix-conatainer"}>
            <div className={"prefix-icon-container"}>
                {renderPrefix()}
            </div>
            {type !== 'textarea' ? <input
                className={classesInput}
                type={showPassword && !isShowPassword ? 'password' : type ?? 'text'}
                placeholder={placeholder ?? '请输入'}
                disabled={disabled}
                value={value}
                onChange={(e) => handleInputChange(e)}
            /> : <textarea
                className={"yulang-textarea"}
                placeholder={placeholder}
                rows={rows}
                disabled={disabled}
                readOnly={readOnly}
                value={value}
                onChange={(e) => handleInputChange(e)}
            ></textarea>}
            <div className={"suffix-icon-container"}>
                <i
                    className={"iconfont icon-guanbi"}
                    style={{ 'display': isShowClearIcon ? 'block' : 'none' }}
                    onClick={clearInputValue}
                ></i>
                {showPassword ? <i
                    className={"iconfont icon-yanjing"}
                    onClick={passwordEyeClick}
                ></i> : <></>}
                {renderSuffix()}
            </div>
        </div>
        {renderAppend()}
    </div >
}

Input.defaultProps = {
    showPassword: false,
    clearable: false
}

export default Input;